<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet"  href="../css/bulk-delivery.css">


    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../../configure.js"></script>
    <script src="../js/bulk_delivery.js"></script>
    <script src="../js/distpicker.data.js"></script>
    <script src="../js/distpicker.js"></script>
    <script type="text/javascript">
      
        $(document).ready(function(e) {
            $("#btn").click(function () {
                if(!$(".checkbox-agree").prop("checked")){
                    layer.msg("请先勾选协议");
                    return false;
                }

                let flag = 0;
                let phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
                let sendPhone = $.trim($('#sendPhone').val());
                if (sendPhone=="") {
                    // layer.msg("请输入有效的手机号码");
                    $('#sendPhone').css({border:"solid 1px red"});
                    $('#send-phone-p').html("手机号不能为空");
                    flag = 1;
                }else{
                    if (!phoneReg.test(sendPhone)) {
                        $('#sendArea').css({border:"solid 1px blue"});
                        $('#send-phone-p').html("");
                        $('#sendPhone').css({border:"solid 1px red"});
                        $('#send-phone-p').html("请输入正确的手机号");
                        flag = 1;
                    }else{
                        $('#sendArea').css({border:"solid 1px #67C23A"});
                        $('#send-phone-p').html("");
                    }
                }
                let sendName = $.trim($('#sendName').val());
                if (sendName=="") {
                    $('#sendName').css({border:"solid 1px red"});
                    $('#send-name-p').html("寄件人姓名不能为空");
                    flag = 1;

                }else{
                    $('#sendName').css({border:"solid 1px #67C23A"});
                    $('#send-name-p').html("");


                }
                
                let sendAddress = $.trim($('#sendAddress').val());
                if (sendAddress=="") {
                    $('#sendAddress').css({border:"solid 1px red"});
                    $('#send-address-p').html("请输入详细地址");
                    flag = 1;

                }else{
                    $('#sendAddress').css({border:"solid 1px #67C23A"});
                    $('#send-address-p').html("");


                }

                if(flag == 1){
                    return false;
                }else{
                    
                    let formData = new FormData();
                    let sendName = $("#sendName").val();
                    let sendPhone = $("#sendPhone").val();
                    let sendAddress = $("#sendAddress").val();
                    let sendArea = $(".sendArea").val();
                    let sendProvince = $(".sendProvince").val();
                    let sendCity = $(".sendCity").val();
                    let userId = $(".userId").val();
                    console.log(userId);
                    formData.append("file", $('[type="file"]')[0].files[0]);
                    formData.append("sendName", sendName);
                    formData.append("sendPhone", sendPhone);
                    formData.append("sendAddress", sendAddress);
                    formData.append("sendArea", sendArea);
                    formData.append("sendProvince", sendProvince);
                    formData.append("sendCity", sendCity);
                    formData.append("userId", userId);

                    $.ajax({
                        url: url + "/user/batchAddUserPage",
                        type : 'post',
                        data : formData,
                        cache: false,   //上传文件无需缓存
                        processData: false,   // 用于对参数进行序列化处理，这里必须设为false
                        contentType:false,
                        dataType:"json",
                        async:false,
                        success:function (data) {
                            console.log(data);
                            if(data.code==2){
                                layer.msg("文件格式有误，读取失败")
                            }
                            if(data.code==1){
                                layer.msg('添加成功，共添加'+data.message+'条订单，快递员将尽快与您取得联系。', {icon: 1});

                            }
                            if(data.code==4){
                                layer.msg('表格中存在错误的信息');

                            }

                        }
                    })
                    return true;
                }
            });
           
            
        });

    $(document).ready(function(){
            $('#my-img').click(function(){
                $('#img-upload').click();
               
            });
           

        });
        $(document).ready(function(e) {
            $("#img-upload").change(function(e) {
                
                let formData = new FormData();
                formData.append("file", $('[type="file"]')[0].files[0]);
                formData.append("sendName", "111");

                $.ajax({
                    url: url + "/user/batchAddUserPageAJAX",
                    type : 'post',
                    data : formData,
                    cache: false,   //上传文件无需缓存
                    processData: false,   // 用于对参数进行序列化处理，这里必须设为false
                    contentType:false,
                    dataType:"json",
                    success:function (data) {
                        console.log(data);
                        if(data.code == 1) {
                            layer.msg("读取成功，共读取"+data.message+"条有效数据<br>请认真核对信息是否有误。")
                            $(".middle-addressee").height(400);
                            let html = '';

                            let htmlPage =''
                            let list = data.data

                            $("#page").html(htmlPage)
                            for(let i = 0; i< list.length;i++){
                                html += `
                    <tr>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveProvince}${list[i].receiveCity}${list[i].receiveArea}</td>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>

                    <td>&emsp;&emsp;${list[i].weight}</td>

                    </tr>`
                            }
                            html += `</table>`
                            $("#table").append(html)


                        } else if(data.code == 2){
                            layer.msg("文件格式有误，转换失败")
                           
                        }else if(data.code == 4){
                            layer.msg('表格中存在错误的信息');
                        }
                    },
                    error : function() {
                        layer.msg("文件大小不能超过5MB");
                    }
                })
            });
        });
    </script>
</head>
<body>
    <div class="head">
        <div class="container">
            <div class="option-first">
                <img src="../img/sdkd_log.png">
            </div>
            <div class="option">
                <a href="HomePage.html">首页</a>
            </div>
            <div class="option">
                <a href="booking_delivery.html">预约寄件</a>
            </div>
            <div class="option">
                <a href="#" style="color: #6EC4FB;">批量寄件</a>
            </div>
            <div class="option" style="background-color: white;">
                <a href="service.html">查询服务</a>
            </div>
            <div class="option" style="background-color: white;">
                <a href="#" id="personalCenter">个人中心</a>
            </div>
            <div class="option-last"  style="width:140px;">
                <a id="log-out" href="login.html">登录</a>
                <a id="log-in" style="margin-right: 10px;" href="../../personalcenter/html/MyShunda.html"></a>
            </div>
        </div>
    </div>
    <div class="middle-body">
        <div class="middle-head">
            <div class="middle-left">
                <div class="img">
                    <img style="width: 100%;height: 100%;" src="../img/send.svg">
                </div>
                <p class="title ">
                    &nbsp;预约寄件
                </p>
                <p class="text">
                    （17点前下单，业务员当天收件，17点后下单次日收件）
                </p>
            </div>
            <div class="middle-right">
                <p class="text">
                    &thinsp; 
                </p>
                <div class="button delivery">
                    <p class="href">预约寄件</p>
                </div>
                <p class="text">单独寄件，可以使用&thinsp;  </p>
            </div>
            
        </div>
        <div class="level">
            <hr style="height: 1px;background-color: #CCCCCC;border: none;">   
        </div>
        <form method="post" id="form"  enctype="multipart/form-data" action="../batchAddUserPage.do">
        <div class="middle-sender">
            <div class="sender-form">
                <div class="label">
                    <div class="square">寄</div>
                    <div class="triangle"></div>
                </div>
                <div class="send-main">
                    <div class="input-text">
                        <span>&emsp;&emsp;<span style="color: red;">*</span>姓名：&emsp;</span><input id="sendName" name="sendName" type="text" class="input">
                        <!-- <div class="button">
                            <p class="href">地址薄</p>
                        </div> -->
                    </div>
                    <div  class="interval">
                        <p id="send-name-p"></p>
                    </div>
                    <div class="input-text">
                        <span>&emsp;&emsp;<span style="color: red;">*</span>电话：&emsp;</span><input id="sendPhone" name="sendPhone" type="text" class="input">
                    </div>
                    <div class="interval">
                        <p id ="send-phone-p"></p>
                    </div>
                    <div class="input-text">
                        <div data-toggle="distpicker" class="form-group">
                            <span><span style="color: #ff0000;">*</span>所属区域：&emsp;</span>
                            <select class="sendProvince checkAddress" name="sendProvince"></select>
                            <select class="sendCity checkAddress" name="sendCity"></select>
                            <select class="sendArea checkAddress" name="sendArea"></select>
                        </div>
                    </div>
                    <div class="interval">
                        <p id ="send-area-p"></p>
                    </div>
                    <div class="input-text">
                    <span><span style="color: red;">*</span>详细地址：&emsp;</span><input id="sendAddress" name="sendAddress" type="text" class="input">

                    </div>
                    <div class="interval">
                        <p id="send-address-p"></p>
                    </div>
                    <!-- <div class="checkbox">
                        <input name='subject' type="checkbox" value="Chinese" /><label> 保存到常用地址薄</label>
                        <a href="#">智能解析地址</a>
                    </div>      -->
                </div>
                
            </div>
            <div id="login-true" style="display: none;" class="sender-login">

                <div class="member">
                    <div class="freight">
                        <span>运费时效查询</span>
                        <div id="tips"  class="interval">
                            <span id="tips-span"></span>
                         </div>
                    </div>
                   
                    <div class="origin">
                        <div class="left">
                            <p >始发地 :</p>
                        </div>
                        <input placeholder="请输入内容" id="start" class="right" type="text">
                    </div>
                    <div class="interval">

                    </div>
                    <div class="origin">
                        <div class="left">
                            <p>目的地 :</p> 
                        </div>
                        <input placeholder="请输入内容" id="end" class="right" type="text">
                    </div>
                    <div class="interval">
                        
                    </div>
                   
                    <div class="weight">
                        <div class="left">
                            首重:
                        </div>
                        <div class="right">
                            <span id ="first">-</span> 元/kg
                        </div>
                   </div>
                   <div class="interval">
                        
                    </div>
                    <div class="weight">
                        <div class="left">
                            续重:
                        </div>
                        <div class="right">
                            <span id = "finally">-</span> 元/kg
                        </div>
                    </div>
               <div class="interval">
                        
                </div>
                <div class="explain">
                    说明：此报价为指导价仅供参考，详询中通当地营业网点。
                    注意：为保证查询结果的正确性，请完整输入省市区。
                    
                </div>
                </div>
                </div>
            <div id="login-false" class="sender-login">
                <div class="member">
                    <ul>
                        <li class="title">会员登录下单好处多</li>
                        <li>
                            <div class="img">
                                <img src="../img/location.svg">
                            </div>
                            &thinsp; 登陆后可使用地址簿，寄件更便捷！
                        </li>
                        <li>
                            <div class="img">
                                <img src="../img/note.svg">
                            </div>
                            &thinsp; 快件路由订阅、快件信息管理、批量下单
                        </li>
                        <li>
                            <div class="img">
                                <img src="../img/cup.svg">
                            </div>
                            &thinsp; 更多特权逐渐开放中
                        </li>
                        <li>
                            <button>立即登录</button>&nbsp;或&nbsp;<a href="#">注册成为瞬达会员</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="middle-addressee">
            <div class="label">
                <div class="square">收</div>
                <div class="triangle"></div>
            </div>
            <div class="option"></div>
            <div class="option">


                <div class="head-img" style="width: 100px;height: 30px;">
                    <div class="file-up" id="my-img">选择文件</div>
                  
                    <input style="display: none;"  type="file" id="img-upload"/>
                </div>


                <a href="#" class="upload">
                    <div class="question">
                        <img src="../img/help.svg" alt="">
                    </div>    
                    &nbsp;&nbsp;上传帮助
                </a>
               <a href="sdkd.xlsx" style="margin-right: 7px;">下载模板</a>
            </div>
            <div class="option"></div>
            <div class="title">已成功上传的收件人列表：</div>
            <div class="table" overflow：auto;>
                <table id="table" style="width: 1100px;color: #909399;font-size:14px">
                    <tr>
                        <th>&emsp;&emsp;收件人姓名</th>
                        <th>收件人手机</th>
                        <th>省 市 区(县</th>
                        <th>详细地址</th>
                        <th>物品名称(限16字)</th>
                        <th>重量(默认1KG)</th>
                    </tr>
                   


                </table>
            </div>
            <div class="information" style="border: 0px;"></div>
            
        </div>
        
        <div class="middle-regulations">
            <div class="agreement">
                <div class="left">
                    <input class="checkbox-agree" type="checkbox">&nbsp;同意并接受
                </div>
                <div class="right">
                    <a href="#">"快递服务协议"</a> <a href="#">"隐私政策"</a>
                </div>
            </div>
            <button id="btn" type="button" class="button">
                立即下单
            </button>
        </div>
            <input name="userId" type="text" style="display: none" class="userId"></input>
        </form>     
    </div>
    
    <div class="foot">
        <div class="top">
            <div class="top-body">
                <div class="middle">
                    <div class="href" style="margin-top: 30px;">
                        <div class="img">
                            <img src="../img/outlets.svg">
                        </div>
                        &emsp;网点查询
                    </div>
                    <div class="href">
                        <div class="img">
                            <img src="../img/service.svg">
                        </div>
                        &emsp;产品服务
                    </div>
                </div>
                <div class="middle">
                    <div class="href" style="margin-top: 30px;">
                        <div class="img">
                            <img src="../img/prescription.svg">
                        </div>
                        &emsp;运费时效
                    </div>
                    <div class="href">
                        <div class="img">
                            <img src="../img/prohibit.svg">
                        </div>
                        &emsp;禁寄物品
                    </div>
                    <div class="in">

                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../img/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../img/weixin.svg">
                    </div>
                    <div class="text">
                        &emsp;微信公众号
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../img/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../img/qq.svg">
                    </div>
                    <div class="text">
                        &emsp;QQ公众号
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../img/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../img/alipay.svg">
                    </div>
                    <div class="text">
                        &emsp;支付宝服务窗
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../img/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../img/app.svg">
                    </div>
                    <div class="text">
                        &emsp;瞬达APP
                    </div>
                </div>
                <div class="interval">

                </div>
                <div class="logo">
                    <img src="../img/2.png">
                </div>
            </div>
        </div>
        <div class="bottom">
            瞬达快递 版权所有 <a href="#">沪ICP备13044869号</a>
        </div>
    </div>


</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/intercept.js"></script>
<script>
     $("#login-true").hide();
        $("#login-false").show();
    $.ajax({
        url: url + "/userInfo/loginStatus",
        async: false,
        dataType: "json",
        type: "post",
        success: function (data) {
            console.log(data)
            if(1 == data.code){
                $("#log-in").show();
                $("#log-out").hide();
                $("#login-true").show();
                $("#login-false").hide();
                $("#log-in").html('欢迎,<a style="color:blue">'+data.data.phone+'</a>')
                $(".userId").val(data.data.id)
            }else if(2 == data.code){
                $("#log-in").hide();
                $("#log-out").show();
                $("#login-true").hide();
                $("#login-false").show();
                //$("#login-out").append("123");
            }
        },error:function(){
            $("#log-in").hide();
            $("#log-out").show();
        }
    }, "json")
</script>
</html>